import qs from 'qs'
export default {
  name: 'Menumg',
  data() {
    return {
      menuData: [],
      dataTop: {
        "mName": '栏目名称',
        "action": '访问路径',
        "mid": "ID",
        "pId": '',
        "show": "菜单展示",
        "level": "分级",
        "type": "类型",
        "operate": [],
        "childre": []
      },
      formLabelWidth: '120px',
      handleDialog: false,
      secData: {
        mName: '',
        type: '',
        level: '',
        pId: '',
        show: '0',
        action: '',
        icon: '',
      },
      belongPage: true,
      typeData: [
        {
          name: '菜单',
          type: '0'
        },
        {
          name: '功能',
          type: '1'
        }
      ],
      levelData: [
        {
          name: '一级',
          value: '1'
        },
        {
          name: '二级',
          value: '2'
        },
        {
          name: '三级',
          value: '3'
        },
        {
          name: '四级',
          value: '4'
        },
        {
          name: '五级',
          value: '5'
        },
        {
          name: '六级',
          value: '6'
        }
      ],
      pageData: [],
      handleModify: false,
      modifyData: {
        indexse: '',
        mId: '',
        mName: '',
        type: '',
        level: '',
        show: '0',
        action: '',
        icon: ''
      },
      handleOrder: false,
      menuOrderNew: [],
      iconShow: false,
    }
  },
  computed: {
    secLevel() {
      return this.secData.level;
    },
    menuOrderOld() {
      var arr = JSON.parse(JSON.stringify(this.menuData));
      arr.splice(0, 1);
      return arr;
    }
  },
  watch: {
    //分级菜单下来选择数据
    secLevel(newVal, oldVal) {
      this.secData.pId = '';
      this.$http.post('/menuInfoController/queryFatherMenu?level=' + newVal)
        .then((res) => {
          if (res.status == 200) {
            this.pageData = res.rows;
          }
        }).catch((err) => {
          console.log(err);
        })
      if (newVal == 1 || newVal == '') {
        this.belongPage = true;
      } else {
        this.belongPage = false;
      }
    },
    handleDialog(newVal, oldVal) {
      if (!newVal) {
        this.secData = {
          mName: '',
          action: '',
          type: '',
          level: '',
          pId: '',
          show: '0',
          icon: ''
        }
      }
    },
    handleOrder() {
      this.menuOrderNew = [];
    }
  },
  created() {
    this.initMenu();
  },
  mounted() {

  },
  methods: {
    //菜单数据
    initMenu() {
      this.$http.get('/menuInfoController/findMenuList')
        .then((res) => {
          if (res.status == 200) {
            res.rows.unshift(this.dataTop);
            this.menuData = res.rows;
            return;
          }
        }).catch((err) => {
          console.log(err);
        });
    },
    //创建菜单
    createMenu() {
      if (this.secData.mName == '' || this.secData.type == '' || this.secData.level == '') {
        this.$message.error("名称，类型，分级，不能为空");
        return;
      }
      if (this.secData.level != 1 && this.secData.pId == '') {
        this.$message.error("请选择所属页面");
        return;
      }
      var postData = qs.stringify(this.secData);
      //新增栏目
      this.$http.post('/menuInfoController/addMenuInfo', postData)
        .then((res) => {
          if (res.status == 200) {
            this.$message({
              type: 'success',
              message: res.message
            });
            this.handleDialog = false;
            this.initMenu();
          } else if (res.status == 500) {
            this.$message.error(res.message);
          }
        }).catch((err) => {
          console.log(err);
        })
    },
    //菜单排序
    orderChange() {
      if (this.menuOrderNew.length != this.menuOrderOld.length) {
        this.$message.error("新排序不完整");
        return false;
      }
      //排序修改
      this.$http.post('/menuInfoController/menusIndexse?mIds=' + this.menuOrderNew.join(','))
        .then((res) => {
          if (res.status == 200) {
            this.initMenu();
            this.$message.success('修改成功');
            this.handleOrder = false;
            return;
          }
        }).catch((err) => {
          console.log(err);
        })
    },
    nodeType(data) {
      var returnData = '类型';
      if (data == '0') {
        returnData = '菜单'
      } else if (data == '2') {
        returnData = '功能';
      }
      return returnData;
    },
    nodeShow(data) {
      var returnData = '菜单展示';
      if (data == returnData) {
        return returnData
      }
      if (data) {
        returnData = '是';
      } else {
        returnData = '否';
      }
      return returnData;
    },
    //修改和删除按钮点击事件
    getNode(data, str) {
      if (str == 'change') {
        if (data.action.length > 0) {
          this.modifyData.action = data.action;
        } else {
          this.modifyData.action = "";
        }
        this.modifyData.mId = data.mid;
        this.modifyData.mName = data.mName;
        this.modifyData.type = data.type == 0 ? '菜单' : '功能';
        this.modifyData.level = data.level + '级';
        this.modifyData.show = data.show;
        this.modifyData.indexse = data.indexse;
        if (data.type == 1) {
          this.iconShow = false;
        } else {
          this.iconShow = true;
          this.modifyData.icon = data.icon;
        }
        this.handleModify = true;
      } else if (str == 'del') {
        this.$confirm('删除[' + data.mName + ']及其关联下级菜单或功能,是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            var postData = qs.stringify({
              mId: data.mid
            });
            // 删除栏目
            this.$http.post('/menuInfoController/delMenuInfo', postData)
              .then((res) => {
                if (res.status == 200) {
                  this.$message({
                    type: 'success',
                    message: res.message
                  });
                  this.initMenu();
                  return;
                }
                this.$message.error(res.message);
              })
              .catch((res) => {
                console.log('err', res)
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          })
      }
    },
    //修改菜单
    modifyMenu() {
      var postData = qs.stringify(this.modifyData);
      this.$http.post('/menuInfoController/updateMenInfo', postData)
        .then((res) => {
          if (res.status == 200) {
            this.$message({
              type: 'success',
              message: res.message,
            });
            this.initMenu();
            this.handleModify = false;
          }
        }).catch((err) => {
          console.log(err);
        });
    },
    renderContent(h, { node, data, store }) {
      var returnType = "类型";
      if (data.type == '0') {
        returnType = "菜单";
      } else if (data.type == '1') {
        returnType = '功能';
      }
      var returnShow = '菜单展示'
      if (data.show == "1") {
        returnShow = '是'
      } else if (data.show == '0') {
        returnShow = '否'
      }
      var returnUrl = '';
      if (data.mid != 'ID' && data.action.length > 0) {
        returnUrl = data.action;
      }

      if (data.mid == 'ID') {
        return (
          <span class="custom-tree-node">
            <span>{node.data.mName}</span>
            <span>{node.data.level}</span>
            <span>{node.data.action}</span>
            <span>{node.data.type}</span>
            <span>{node.data.show}</span>
            <span>操作</span>
          </span>);
      } else {
        return (
          <span class="custom-tree-node">
            <span>{node.data.mName}</span>
            <span>{node.data.level}</span>
            <span>{returnUrl}</span>
            <span>{returnType}</span>
            <span>{returnShow}</span>
            <span>
              <el-button
                icon="el-icon-delete"
                class="del"
                on-click={() => this.getNode(data, 'del')}>
              </el-button>
              <el-button
                icon="el-icon-edit"
                class="change"
                on-click={() => this.getNode(data, 'change')}>
              </el-button>
            </span>
          </span>);
      }
    }
  },
}